<template>
  <div class="search-history" v-if="searchHistory.length > 0">
    <div class="history-header">
      <span class="history-title">搜索历史</span>
      <el-button 
        type="text" 
        size="small" 
        @click="clearHistory"
        :icon="Delete"
      >
        清空
      </el-button>
    </div>
    <div class="history-list">
      <div
        v-for="item in searchHistory"
        :key="item"
        class="history-item"
        @click="selectHistory(item)"
      >
        <el-icon><Search /></el-icon>
        <span>{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Search, Delete } from '@element-plus/icons-vue'
import { storageService } from '@/services/storage'

interface Props {
  modelValue?: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'search', value: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const searchHistory = computed(() => {
  return storageService.getSearchHistory()
})

const selectHistory = (query: string) => {
  emit('update:modelValue', query)
  emit('search', query)
}

const clearHistory = () => {
  storageService.clearSearchHistory()
}
</script>

<style scoped>
.search-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.history-title {
  font-size: 12px;
  color: #909399;
}

.history-list {
  padding: 4px 0;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 14px;
  color: #606266;
}

.history-item:hover {
  background-color: #f5f7fa;
}

.history-item .el-icon {
  color: #909399;
  font-size: 14px;
}
</style> 